<!DOCTYPE html> 
<html> 
<head> 
	<meta charset="UTF-8">
	<title>Restaurant Picker</title> 
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<link rel="stylesheet" href="css/jquery.mobile.structure-1.0.1.css" />
	<link rel="apple-touch-icon" href="images/launch_icon_57.png" />
	<link rel="apple-touch-icon" sizes="72x72" href="images/launch_icon_72.png" />
	<link rel="apple-touch-icon" sizes="114x114" href="images/launch_icon_114.png" />
	<link rel="stylesheet" href="css/jquery.mobile-1.0.1.css" />
	<link rel="stylesheet" href="css/custom.css" />
	<script src="js/jquery-1.7.1.min.js"></script>
	<script src="js/jquery.mobile-1.0.1.min.js"></script>
	<script src="js/funciones.js"></script>
	<script src="js/jquery.localize.js"></script>
	<script src="js/funciones.js"></script>
</head> 
<body> 
<div id="restau" data-role="page" data-add-back-btn="true">
	
	<div data-role="header"> 
		<h1> Restaurant Picker</h1>
	</div> 
	
	<div data-role="content">
	<div class="ui-grid-a" id="restau_infos">	
		<div class="ui-block-a">
		<h1 id="rest_name"></h1>			
		<p id="rest_address"></p>
		<span id="stars" class="stars1"></span>
		</div>		
		<div class="ui-block-b">
		<p><img id="rest_photo" src=""/></p>
		</div>
	</div><!-- /grid-a -->
	
	<div id="contacts_buttons">
		<a id="buttonPhone" href="#page1" data-role="button" data-rel="dialog" data-transition="slidedown" data-icon="tel"> 
			<span data-localize="phone-rest">Phone Number</span> 
		</a>	
			
		<a href="#page2" data-role="button" data-rel="dialog" data-transition="slidedown" data-icon="maps"> 
			<span data-localize="route-to-rest">Get here from your location</span> 
		</a>
	</div>

	</div>
	
	<label id="spinerText" class="ui-hidden-accessible" data-localize="spiner-text">loading</label>
	
</div><!-- /page -->

<div data-role="page" id="page1">
	<div data-role="header">
		<h1>Header</h1>
	</div>
	<div data-role="content">
		<h3 data-localize="phone-rest">Phone Number</h3>
		<ul data-role="listview" data-inset="true" id="phone_number">
		</ul>		
	</div>
</div><!-- /page1 -->

<div data-role="page" id="page2">
	<div data-role="header">
		<h1>Header</h1>
	</div>
	<div data-role="content">
		<h3 data-localize="route-to-rest-via">Select how to get to the Restaurant</h3>
		<ul id="buttonTransport" data-role="listview" data-inset="true" >
			<li><a id="w" href="#" data-transition="slidedown" data-localize="walking">Walking</a></li>
			<li><a id="d" href="#" data-transition="slidedown" data-localize="car">Car</a></li>
			<li><a id="r" href="#" data-transition="slidedown" data-localize="public">Public Transport</a></li>
		</ul>		
	</div>
</div><!-- /page2 -->
<div data-role="page" id="page3">
	<div data-role="header">
		<h1>Header</h1>
	</div>
	<div data-role="content">
		<ul id="buttonRate" data-role="listview" data-inset="true" >
			<li><a id="1" href="#" data-rel="back"><span class="stars3">1</span></a></li>
			<li><a id="2" href="#" data-rel="back"><span class="stars3">2</span></a></li>
			<li><a id="3" href="#" data-rel="back"><span class="stars3">3</span></a></li>
			<li><a id="4" href="#" data-rel="back"><span class="stars3">4</span></a></li>
			<li><a id="5" href="#" data-rel="back"><span class="stars3">5</span></a></li>
		</ul>		
	</div>
</div><!-- /page2 -->
<script type="text/javascript">
var placeReference;
var placeLongitude;
var placeLatitude;
var myLongitude;
var myLatitude;
var routeUrl;
var phoneNumberVar;
$(document).ready(function () {
	$("[data-localize]").localize("idioma", { pathPrefix: "lang", skipLanguage: /^en/ });
	$('span.stars1').stars();
	$('span.stars2').stars();
	$('span.stars3').stars();
	$("#buttonTransport a").click(showRoute);
	$("#buttonRate a").click(rateRest);
	$("#buttonPhone").click(getPhone);
	showDetailsRest();
});
function showRoute(){
	//routeUrl = "https://maps.google.com/?t=h&saddr=40.418091,-3.709903&daddr=40.4190170,-3.707730&f=d";
	routeUrl += "&dirflg="+this.id;
	window.location.href = routeUrl;
}
function rateRest(){
	$("#rateRest").html("<span class='ui-btn-inner ui-btn-corner-all ui-btn-text'><span class='stars2'>"+this.id+"</span></span>");
	$('span.stars2').stars();
}
function showDetailsRest(){
	showLoadingSpiner()
	var id = getURLParameters('id');
	$.get(pickerSupport.showDetailsRest(id, 'setDetailsRest'));
}
function setDetailsRest(jsonText){
	var tmpJson = $.parseJSON(jsonText);
	placeReference = tmpJson.reference;
	$("#rest_name").html(tmpJson.name);
	$("#rest_address").html(tmpJson.formatted_address+"("+tmpJson.distance+")");
	$("#stars").text(tmpJson.rating);
	
	$('span.stars1').stars();
	
	if(tmpJson.photo_reference != null && tmpJson.photo_reference != "")
		$("#rest_photo").attr("src","https://maps.googleapis.com/maps/api/place/photo?maxwidth=400&key=AIzaSyBbew32IyIjmhVtRqOuw1VDVeESwyJUMjk&sensor=true&photoreference="+tmpJson.photo_reference);
	else{
		$("#rest_photo").css("display","none");
	}

	placeLongitude = tmpJson.longitude;
	placeLatitude = tmpJson.latitude;
	
	myLongitude = tmpJson.myLongitude;
	myLatitude = tmpJson.myLatitude;		
	
	/*https://maps.google.com/?t=h&saddr=40.418091,-3.709903&daddr=40.4190170,-3.707730&f=d*/
	routeUrl = "https://maps.google.com/?t=m&saddr="+myLatitude+","+myLongitude+"&daddr="+placeLatitude+","+placeLongitude+"&f=d"
	
	hideLoadingSpiner()
}
function getPhone(){
	showLoadingSpiner()
	phoneNumberVar = $('#phone_number');
	var phone = pickerSupport.getPhone(placeReference);
	var tmpLiFragment = "<li id='li-phone' data-icon='tel' data-iconpos='left'><a href='tel:"+phone+"'>"+phone+"</a></li>";
	phoneNumberVar.append(tmpLiFragment);
	phoneNumberVar.listview('refresh');
	hideLoadingSpiner()
	$("#buttonPhone").click();
}
</script>
</body>
</html>